<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06_组件里的数据如何存放</title>
</head>
<!-- 
组件是一个单独功能模块的封装: 这个模块有属于自己的 html 模板,也应该有属性:自己的数据 data;
我们发现组件不能直接访问 Vue 实例中的 data,而且即使可以访问,如果将所有的数据都放在 Vue 实例中,Vue实例就会变得非常臃肿。

结论: Vue 组件应该有自己保存数据的地方,那组件自己的数据存放在哪里呢?
    1.组件对象也有一个 data 属性(也可以有 methods等属性...);
    2.只是这个 data 属性必须是一个函数,而且这个函数返回一个对象,对象内部保存着数据
-->

<body>
    <div id="app">
        <tmp></tmp>
        <h3>{{message}}</h3>
    </div>
</body>

<script src="../vue.js"></script>

<template id="tmp">
    <div>
        <h3 @click="zujianMethod">消息:{{zujianMessage}}</h3>
    </div>
</template>

<script>
    Vue.component('tmp', {
        template: '#tmp',
        data() {
            return {
                zujianMessage: '我是组件的内容...'
            }
        },
        methods: {
            zujianMethod() {
                alert('我是组件的方法...')
            }
        }
    })

    const vm = new Vue({
        el: '#app',
        data: {
            message: '我是Vue实例的内容...'
        }
    })
</script>

</html>